<template>
  <div class="loginpage">
    <div class="l-h">
      <img class="img1" src="//chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/1733658423176%E9%A1%B5%E7%9C%89.png" alt="">
      <div class="l-h-r" @click="to('/')">
        <img src="//chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/1733658505979%E9%A6%96%E9%A1%B5%2C%E5%B1%8B%E5%AD%90%2C%E4%B8%BB%E9%A1%B5%2C%E6%88%BF%E5%AD%90.png" alt="">
        <div class="back">返回首页</div>
      </div>
    </div>

    <div class="l-c">
      <div v-if="mode === modeEnum.choose" class="choose-type">
        <div class="c-t">站院协同服务平台</div>
        <div class="c-content">
          <div class="content-btn">
            <img src="//chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/1733662372189%E7%94%A8%E6%88%B7%20%281%29.png" alt="">
            <el-button @click="registype='stu';mode= 'post-stu'" type="primary">
              小院研究生注册
            </el-button>
          </div>
          <div class="content-btn">
            <img src="//chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/1733662388572%E5%86%9C%E6%88%B7%E5%90%8D%E7%A7%B0.png" alt="">
            <el-button @click="registype='nonh'; mode ='post-nonh'" type="primary">
              农户注册
            </el-button>
          </div>
        </div>
      </div>

      <!-- 注册 -->
      <div v-else-if="mode === modeEnum.postStu || mode === modeEnum.postNonh" class="post-c">
        <div class="post-head">
          <el-button type="primary" @click="to('/login')">
            已有账号？立即登录
            <img src="//chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/1733663172397%E8%BF%94%E5%9B%9E.png" alt="">
          </el-button>
        </div>
        <div class="post-head-t">
          {{ mode === modeEnum.postStu ? '小院研究生用户注册':'农户注册' }}
          
        </div>

        <el-steps style="max-width: 600px" :active="step" align-center>
          <el-step title="基本信息" />
          <el-step title="注册成功" />
        </el-steps>

        <div v-if="mode === modeEnum.postStu" class="post-stu">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            v-if="step === stepEnum.step1"
          >
            <el-form-item label="培养单位" prop="trainingUnits">
              <el-select v-model="ruleForm.trainingUnits" placeholder="请选择培养单位">
                <el-option label=" 河南农业大学" value=" 河南农业大学" />
                <!-- <el-option label="Zone two" value="beijing" /> -->
              </el-select>
            </el-form-item>
            <el-form-item label="科技小院" prop="courtyardId">
              <el-select 
                filterable
                v-model="ruleForm.courtyardId" placeholder="请选择所在小院">
                <el-option v-for="item in yards" :value="item.courtyardId" :label="item.courtyardName" />
                <!-- <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" /> -->
              </el-select>
            </el-form-item>
            <el-form-item label="账号" prop="account">
              <el-input placeholder="请输入账号" v-model="ruleForm.account" />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input placeholder="请输入您的姓名" v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="性别" prop="gender" >
              <el-select-v2
                v-model="ruleForm.gender"
                placeholder="请选择性别"
                :options="genderos"
              />
            </el-form-item>

            <el-form-item label="出生日期" prop="birthdate">
              <el-date-picker
                v-model="ruleForm.birthdate"
                type="datetime"
                placeholder="请输入您的出生日期"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                style="width: 100%;"
              />
            </el-form-item>

            <el-form-item label="民族" prop="nationality">
              <el-select-v2
                v-model="ruleForm.nationality"
                placeholder="请选择名族"
                :options="mingzu"
              />
            </el-form-item>

            <el-form-item label="政治面貌" prop="politicalStatus">
              <el-select-v2
                v-model="ruleForm.politicalStatus"
                placeholder="请选择政治面貌"
                :options="zz"
              />
            </el-form-item>

            <el-form-item label="籍贯" prop="nativePlace">
              <el-input placeholder="请输入籍贯（出生地）" v-model="ruleForm.nativePlace" />
            </el-form-item>

            <el-form-item label="常用邮箱" prop="email">
              <el-input placeholder="请输入您的邮箱" v-model="ruleForm.email" />
            </el-form-item>

            <el-form-item label="手机" prop="phone">
              <el-input placeholder="请输入您的手机号" v-model="ruleForm.phone" />
            </el-form-item>

            <el-form-item label="验证码" prop="verifyCode">
              <el-input
                v-model="ruleForm.verifyCode"
                size="large"
                placeholder="请输入验证码"
                class="tab-input"
              >
              <template #append>
                <el-button @click="getcode(true)" class="codeb" :class="!disabled ? 'codebtn': ''" type="primary">{{disabled ? timeText+'s' : '获取验证码'}}</el-button>
              </template>
              </el-input>
            </el-form-item>

            <el-form-item label="设置登录密码" prop="password">
              <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" />
            </el-form-item>

            <el-form-item label="确认登录密码" prop="password1">
              <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password1" />
            </el-form-item>

            <el-form-item class="item-sb">
              <el-button class="s-btn" type="primary" @click="submitForm(ruleFormRef)">
                下一步
              </el-button>
              <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
            </el-form-item>
          </el-form>
          
          <div class="ruzhu-dj" v-if="step === stepEnum.step2">
            <img src="//chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/1733756056799%E5%AF%B9%E5%8B%BE_%E5%9D%97.png" alt="">
            <div>注册成功</div>
            <el-button @click="to('/ruzhu')" class="e-b" type="primary">点击前往入驻登记</el-button>
          </div>
        </div> 

        <div v-else-if="mode === modeEnum.postNonh" class="post-nonh">
          <el-form
            ref="ruleFormRef2"
            :model="ruleForm2"
            :rules="rules2"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            v-if="step === stepEnum.step1"
          >
          <!-- 
            <el-form-item label="账号" prop="account">
              <el-input placeholder="请输入账号" v-model="ruleForm2.account" />
            </el-form-item> -->

            <el-form-item label="姓名" prop="name">
              <el-input placeholder="请输入您的姓名" v-model="ruleForm2.name" />
            </el-form-item>

            <el-form-item label="性别" prop="gender" >
              <el-select-v2
                v-model="ruleForm2.gender"
                placeholder="请选择性别"
                :options="genderos"
              />
            </el-form-item>

            <el-form-item label="所在地" prop="area">
              <el-input placeholder="请输入所在地" v-model="ruleForm2.area" />
            </el-form-item>

            <!-- <el-form-item label="出生日期" prop="birthdate">
              <el-date-picker
                v-model="ruleForm2.birthdate"
                type="datetime"
                placeholder="请输入您的出生日期"
                format="YYYY/MM/DD hh:mm:ss"
                value-format="YYYY-MM-DD"
                style="width: 100%;"
              />
            </el-form-item> -->

            <!-- <el-form-item label="民族" prop="nationality">
              <el-select-v2
                v-model="ruleForm2.nationality"
                placeholder="请选择名族"
                :options="mingzu"
              />
            </el-form-item> -->

            <!-- <el-form-item label="政治面貌" prop="politicalStatus">
              <el-select-v2
                v-model="ruleForm2.politicalStatus"
                placeholder="请选择政治面貌"
                :options="zz"
              />
            </el-form-item> -->
<!-- 
            <el-form-item label="籍贯" prop="nativePlace">
              <el-input placeholder="请输入籍贯（出生地）" v-model="ruleForm2.nativePlace" />
            </el-form-item> -->

            <el-form-item label="常用邮箱" prop="email">
              <el-input placeholder="请输入您的邮箱" v-model="ruleForm2.email" />
            </el-form-item>

            <el-form-item label="手机" prop="phone">
              <el-input placeholder="请输入您的手机号" v-model="ruleForm2.phone" />
            </el-form-item>

            <el-form-item label="验证码" prop="verifyCode">
              <el-input
                v-model="ruleForm2.verifyCode"
                size="large"
                placeholder="请输入验证码"
                class="tab-input"
              >
              <template #append>
                <el-button @click="getcode(true)" class="codeb" :class="!disabled ? 'codebtn': ''" type="primary">{{disabled ? timeText+'s' : '获取验证码'}}</el-button>
              </template>
              </el-input>
            </el-form-item>

            <el-form-item label="设置登录密码" prop="password">
              <el-input placeholder="请输入密码" v-model="ruleForm2.password" />
            </el-form-item>

            <el-form-item label="确认登录密码" prop="password1">
              <el-input placeholder="请输入密码" v-model="ruleForm2.password1" />
            </el-form-item>

            <el-form-item class="item-sb">
              <el-button class="s-btn" type="primary" @click="submitForm2(ruleFormRef2)">
                下一步
              </el-button>
            </el-form-item>
          </el-form>

          <div class="ruzhu-dj" v-if="step === stepEnum.step2">
            <img src="//chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/1733756056799%E5%AF%B9%E5%8B%BE_%E5%9D%97.png" alt="">
            <div>注册成功</div>
          </div>

        </div>
      </div>

    </div>

    <div class="l-b">
      @2025 河南科技小院版权所有
    </div>
  </div>
</template>  
<script setup>
	import { Search, User, Lock } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';
  import { reactive, ref } from 'vue'
  import { pageCourtyard, postgraduateInfo, postfarmer,sendSmsVerifyCodeGraduate, sendSmsVerifyCodeFarmer } from '@/api/home';
  import encrypt from '@/utils/cryptoUtil';
	import { useStore } from 'vuex'//导入createStore构造函数
	const store = useStore();

 
  const modeEnum = {
    choose: 'choose',
    postStu: 'post-stu',
    postNonh: 'post-nonh'
  }

  const stepEnum = {
    step0: 0,
    step1: 1, // 默认
    step2: 2,
  }
  const step = ref(stepEnum.step1); // 2
  const mode = ref(modeEnum.choose);
  const registype = ref(null);
  const router = useRouter();
  const disabled = ref(false);
  const timeText = ref(59);
  const timeout = ref(null);

  const getcode = (isclick) => {
    console.log('123123',timeText.value)
    if(isclick) {
      if(disabled.value) {
        return
      } else {
        const formRef = mode?.value == modeEnum?.postStu ? ruleFormRef : ruleFormRef2;
        formRef.value?.validateField(['phone']).then(e => {
          getcodefetch();
          getcode();
        }).catch(e => {
          return
        })
      }
    } else {
      if(timeText.value === 0) {
        timeText.value = 59;
        disabled.value = false;
        clearTimeout(timeout.value)
        return
      }
      disabled.value = true;
      timeout.value = setTimeout(() => {
        if(timeText.value >0) {
          timeText.value--;
        }
        getcode();
      }, 1000);
    }
  }
  const getcodefetch = async() => {
    // formEl.valida
    // return
    const _form = mode?.value == modeEnum?.postStu ? ruleForm : ruleForm2;
    const func = mode?.value == modeEnum?.postStu ? sendSmsVerifyCodeGraduate:sendSmsVerifyCodeFarmer;
      const ret = await func({phone:_form.phone});
      if(ret?.code == '200') {
        _$.$message({type: 'success',message:  '验证码发送成功'});
      } 
      // else {
      //   _$.$message({type: 'error',message:  '验证码发送失败，请稍后再试'});
      // }
  }

  const formSize = ref('default')
  const ruleFormRef = ref(null)
  const ruleFormRef2 = ref(null)
  const ruleForm = reactive({
    // account: '',
    trainingUnits:'',
    courtyardId:'',
    name: '',
    gender: '',
    birthdate: '',
    nationality: '',
    politicalStatus: '',
    nativePlace: '',
    email: '',
    phone: [],
    verifyCode: '',
    password: '',
    password1: '',
  })
  const ruleForm2 = reactive({
    area: '',
    // account: '',
    name: '',
    gender: '',
    // birthdate: '',
    // nationality: '',
    // politicalStatus: '',
    // nativePlace: '',
    email: '',
    phone: [],
    verifyCode: '',
    password: '',
    password1: '',
  })
//   {
//     "area": "4",
//     "account": "4",
//     "name": "4",
//     "gender": 0,
//     "email": "4",
//     "phone": "4",
//     "password": "U6keIt5fnUtLHPvwxfSI3A=="
// }
  const mingzu = ref([
    {
        "label": "汉族",
        "value": "汉族"
    },
    {
        "label": "壮族",
        "value": "壮族"
    },
    {
        "label": "满族",
        "value": "满族"
    },
    {
        "label": "回族",
        "value": "回族"
    },
    {
        "label": "苗族",
        "value": "苗族"
    },
    {
        "label": "维吾尔族",
        "value": "维吾尔族"
    },
    {
        "label": "土家族",
        "value": "土家族"
    },
    {
        "label": "彝族",
        "value": "彝族"
    },
    {
        "label": "蒙古族",
        "value": "蒙古族"
    },
    {
        "label": "藏族",
        "value": "藏族"
    },
    {
        "label": "布依族",
        "value": "布依族"
    },
    {
        "label": "侗族",
        "value": "侗族"
    },
    {
        "label": "瑶族",
        "value": "瑶族"
    },
    {
        "label": "朝鲜族",
        "value": "朝鲜族"
    },
    {
        "label": "白族",
        "value": "白族"
    },
    {
        "label": "哈尼族",
        "value": "哈尼族"
    },
    {
        "label": "哈萨克族",
        "value": "哈萨克族"
    },
    {
        "label": "黎族",
        "value": "黎族"
    },
    {
        "label": "傣族",
        "value": "傣族"
    },
    {
        "label": "畲族",
        "value": "畲族"
    },
    {
        "label": "傈僳族",
        "value": "傈僳族"
    },
    {
        "label": "仡佬族",
        "value": "仡佬族"
    },
    {
        "label": "东乡族",
        "value": "东乡族"
    },
    {
        "label": "高山族",
        "value": "高山族"
    },
    {
        "label": "拉祜族",
        "value": "拉祜族"
    },
    {
        "label": "水族",
        "value": "水族"
    },
    {
        "label": "佤族",
        "value": "佤族"
    },
    {
        "label": "纳西族",
        "value": "纳西族"
    },
    {
        "label": "羌族",
        "value": "羌族"
    },
    {
        "label": "土族",
        "value": "土族"
    },
    {
        "label": "仫佬族",
        "value": "仫佬族"
    },
    {
        "label": "锡伯族",
        "value": "锡伯族"
    },
    {
        "label": "柯尔克孜族",
        "value": "柯尔克孜族"
    },
    {
        "label": "达斡尔族",
        "value": "达斡尔族"
    },
    {
        "label": "景颇族",
        "value": "景颇族"
    },
    {
        "label": "毛南族",
        "value": "毛南族"
    },
    {
        "label": "撒拉族",
        "value": "撒拉族"
    },
    {
        "label": "布朗族",
        "value": "布朗族"
    },
    {
        "label": "塔吉克族",
        "value": "塔吉克族"
    },
    {
        "label": "阿昌族",
        "value": "阿昌族"
    },
    {
        "label": "普米族",
        "value": "普米族"
    },
    {
        "label": "鄂温克族",
        "value": "鄂温克族"
    },
    {
        "label": "怒族",
        "value": "怒族"
    },
    {
        "label": "京族",
        "value": "京族"
    },
    {
        "label": "基诺族",
        "value": "基诺族"
    },
    {
        "label": "德昂族",
        "value": "德昂族"
    },
    {
        "label": "保安族",
        "value": "保安族"
    },
    {
        "label": "俄罗斯族",
        "value": "俄罗斯族"
    },
    {
        "label": "裕固族",
        "value": "裕固族"
    },
    {
        "label": "乌兹别克族",
        "value": "乌兹别克族"
    },
    {
        "label": "门巴族",
        "value": "门巴族"
    },
    {
        "label": "鄂伦春族",
        "value": "鄂伦春族"
    },
    {
        "label": "独龙族",
        "value": "独龙族"
    },
    {
        "label": "塔塔尔族",
        "value": "塔塔尔族"
    },
    {
        "label": "赫哲族",
        "value": "赫哲族"
    },
    {
        "label": "珞巴族",
        "value": "珞巴族"
    }
  ])

  const zz = ref([
    {
        "label": "中共党员‌",
        "value": "中共党员‌"
    },
    {
        "label": "‌中共预备党员",
        "value": "‌中共预备党员"
    },
    {
        "label": "共青团员",
        "value": "共青团员"
    },
    {
        "label": "‌民主党派成员",
        "value": "‌民主党派成员"
    },
    {
        "label": "无党派人士",
        "value": "无党派人士"
    },
    {
        "label": "群众",
        "value": "群众"
    }
  ])

  const genderos = ref([
    { value: 0, label: '女' },
    { value: 1, label: '男' },
  ])

  const yards = ref([]);
  const getPageCourtyard =  async(courtyardType) => {
    const params = {
      params: {
        status: true,
        // courtyardType: '',
      },
      page: {
        pageSize: 10000,
        pageNum: 0,
      }
    }
    const ret = await pageCourtyard(params)
    yards.value = ret?.data?.list || [];
  }
  getPageCourtyard('');

  const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    // if (ruleForm.password !== '') {
    //   if (!ruleFormRef.value) return
    // }
    callback()
  }
}

  const validatePass2 = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请确认登录密码'))
    } else if (value !== ruleForm.password) {
      callback(new Error("密码不一致"))
    } else {
      callback()
    }
  }

  const rules = reactive({
    // account: [
    // { 
    //     required: true, 
    //     message: '请输入账号', 
    //     trigger: 'blur' 
    //   },
    // ],
    trainingUnits: [
      { 
        required: true, 
        message: '请选择培养单位', 
        trigger: 'blur' 
      },
    ],
    courtyardId: [
      {
        required: true,
        message: '请选择所属小院',
        trigger: 'change',
      },
    ],
    name: [
      {
        required: true,
        message: '请输入您的姓名',
        trigger: 'blue',
      },
    ],
    gender: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'change',
      },
    ],
    birthdate: [
      {
        required: true,
        message: '请输入您的出生日期',
        trigger: 'change',
      },
    ],
    nationality: [
      {
        required: true,
        message: '请选择名族',
        trigger: 'change',
      },
    ],
    politicalStatus: [
      {
        required: true,
        message: '请选择政治面貌',
        trigger: 'change',
      },
    ],
    nativePlace: [
      {
        required: true,
        message: '请输入籍贯（出生地）',
        trigger: 'blue',
      },
    ],
    email: [
      { required: true, 
        message: '请输入您的邮箱', 
        trigger: 'blur'
       },
    ],
    phone: [
      { required: true, 
        message: '请输入您的手机号', 
        trigger: 'blur'
       },
    ],
    verifyCode: [
      { 
        required: true, 
        message: '请输入验证码', 
        trigger: 'blur'
       },
    ],
    password: [
      { required: true, 
        trigger: 'blur',
        validator: validatePass
       },
    ],
    password1: [
      { 
        required: true, 
        trigger: 'blur',
        validator: validatePass2
       },
    ],
  })

  const rules2 = reactive({
    area: [
    { 
        required: true, 
        message: '请输入所在地', 
        trigger: 'blur' 
      },
    ],
    account: [
    { 
        required: true, 
        message: '请输入账号', 
        trigger: 'blur' 
      },
    ],
    name: [
      {
        required: true,
        message: '请输入您的姓名',
        trigger: 'blue',
      },
    ],
    gender: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'change',
      },
    ],
    // birthdate: [
    //   {
    //     required: true,
    //     message: '请输入您的出生日期',
    //     trigger: 'change',
    //   },
    // ],
    // nationality: [
    //   {
    //     required: true,
    //     message: '请选择名族',
    //     trigger: 'change',
    //   },
    // ],
    // politicalStatus: [
    //   {
    //     required: true,
    //     message: '请选择政治面貌',
    //     trigger: 'change',
    //   },
    // ],
    // nativePlace: [
    //   {
    //     required: true,
    //     message: '请输入籍贯（出生地）',
    //     trigger: 'blue',
    //   },
    // ],
    email: [
      { required: true, 
        message: '请输入您的邮箱', 
        trigger: 'blur'
       },
    ],
    phone: [
      { required: true, 
        message: '请输入您的手机号', 
        trigger: 'blur'
       },
    ],
    verifyCode: [
      { 
        required: true, 
        message: '请输入验证码', 
        trigger: 'blur'
       },
    ],
    password: [
      { required: true, 
        trigger: 'blur',
        // validator: validatePass
       },
    ],
    password1: [
      { 
        required: true, 
        trigger: 'blur',
        // validator: validatePass2
       },
    ],
  })
  const submitForm = (formEl) => {
    console.log('000formEl', formEl)
    if (!formEl) return
    formEl.validate(async(valid, fields) => {
      console.log('valid!',valid,fields)
      if (valid) {
        const params = {
            ...ruleForm,
            password: encrypt(ruleForm.password),
          }
        delete params.password1;
        const ret = await postgraduateInfo({
          params
        })
        console.log('rettt', ret, store)
        if(ret?.code == '200') {
          // ret.data = "1870442383006044162"
          _$.$message({type: 'success',message:  '注册成功'})

          store.commit('setUserinfo', {
              uid: ret.data,
              roleType: 'POSTGRADUATE',
              userName: params.account,
          });

          step.value = stepEnum.step2;


        } 
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  const submitForm2 = (formEl) => {
    console.log('000formEl', formEl)
    if (!formEl) return
    formEl.validate(async(valid, fields) => {
      console.log('valid!',valid,fields)
      if (valid) {
        const params = {
            ...ruleForm2,
            password: encrypt(ruleForm2.password),
          }
        delete params.password1;
        const ret = await postfarmer({
          params
        })
        console.log('rettt', ret)
        if(ret?.code == '200') {
          _$.$message({type: 'success',message:  '注册成功'})
          step.value = stepEnum.step2;
        } 
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  // const resetForm = (formEl) => {
  //   if (!formEl) return
  //   formEl.resetFields()
  // }

  const to = (path) => {
    router.push(path)
  }

</script>
<style lang="scss" scoped>
.loginpage {
  width: 100%;
  height: 100%;
  flex: 1;
  background: url(//chengguo-1309318813.cos.ap-beijing.myqcloud.com/uploads/zizhi/1733657881212%E5%9B%BE%E5%B1%82%201.png) no-repeat center center / cover;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .l-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 10% 0;
    align-items: center;
      .img1 {
        width: 800px;
      }
    .l-h-r {
      display: flex;
      align-items: flex-end;
      color: #fff;
      font-size: 24px;
      cursor: pointer;
      align-items: flex-end;
      height: 45px;
      img {
        margin-right: 10px;
      }
      .back {
        align-self: flex-end;
        margin-bottom: -5px;
      }
    }
  }

  .l-c {
    display: flex;
    flex: 1;
    color: #fff;
    font-size: 30px;
    font-weight: normal;
    padding: 0 10%;
    width: 100%;
    .choose-type {
      padding-top: 120px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .c-t {
        color: #fff;
        font-size: 55px;
        margin-bottom: 40px;
      }
      .c-content {
        width: 70%;
        height: 600px;
        background-color: #0a9c55;
        border-radius: 40px;
        overflow: hidden;
        display: flex;
        .content-btn {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid rgb(255, 255, 255, 0.4);
          &:last-child {
            border-right: 0 none;
          }
          flex-direction: column;
          img {
            width: 200px;
          }
          .el-button {
            width: 300px;
            height: 70px;
            font-size: 26px;
            margin-top: 40px;
            &:hover {
              background-color: #0a9c55
            }
          }
        }
      }
    }

    .post-c {
      background: #fff;
      width: 100%;
      margin-top: 30px;
      border-radius: 30px;
      .post-head {
        color: #fff;
        display: flex;
        justify-content: flex-end;
        padding: 40px 30px;
        .el-button {
          height: 50px;
        }
        img {
          width: 30px;
          margin-left: 10px;
        }
      }
      .post-head-t {
        color: #0cbf68;
        width: 100%;
        text-align: center;
        font-size: 35px;
      }
      .el-steps {
        margin: 0 auto;
        padding-top: 60px;
        :deep(.is-finish) {
          color: #333;
          .el-step__icon {
            background-color: #0cbf68;
            color: #fff;
            border: 0 none;
          }
          .el-step__line {
            top: 23px;
          }
        }
        :deep(.is-process) {
          .el-step__icon {
            background-color: #f6bf58;
            color: #fff;
            border: 0 none;
          }
      
        }
      }
      .demo-ruleForm {
        margin: 0 auto;
        padding-top: 60px;
        width: 1000px;
        :deep(.el-form-item) {
          margin-bottom: 40px;
          .el-form-item__label {
            margin-right: 50px;
            color: #333;
            width: 200px;
          }
          .el-form-item__content {
            .el-input {
              height: 60px;
              .el-input__wrapper {
                background-color: #eef8f3;
              }
            }
            .el-select {
              .el-select__wrapper {
                background-color: #eef8f3;
                height: 60px;
              }
            }
          }
          .el-input-group__append {
            button.el-button {
              background-color: #0a9c55;
              color: #fff;
              height: 100%;
            }
          }
          &.item-sb {
            .el-form-item__content {
              justify-content: flex-end;
            }
            .s-btn {
              height: 70px;
              color: #fff;
              width: 75%;
           }
          }
        
        }
      }
      .post-nonh {
        // background-color: red;
      }
      .ruzhu-dj {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 150px;
        color: #000;
        font-size: 28px;
        img {
          width: 150px;
          margin-bottom: 20px;
        }
        .e-b {
          margin-top: 80px;
        }
      }
    }
  }

  .l-b {
    height: 200px;
    color: #fff;
    display: flex;
    justify-content: center;
    font-size: 20px;
    width: 100%;
    align-items: center;
  }

  .codeb {
    width: 1rem;
  }
  .codebtn {
    background-color: #1dd19d;
    color: #fff;
    height: 100%;
  }

}
</style>